<template>
	<div
		class="match-cards h-[10px] flex items-center gap-1 text-[8px] leading-[1em] text-black app-font-bold"
		:class="{
			'flex-row-reverse': inverse
		}">
		<div
			v-if="+redCards > 0"
			class="w-2 h-full rounded-[2px] bg-danger flex justify-center items-center">
			{{ redCards }}
		</div>
		<div
			v-if="+yellowCards > 0"
			class="w-2 h-full rounded-[2px] bg-warning flex justify-center items-center">
			{{ yellowCards }}
		</div>
		<div
			v-if="+corners > 0"
			class="flex items-center gap-[2px] text-[#96A5AA]"
			:class="{
				'flex-row-reverse': inverse
			}">
			<base-image src="sports/corner"></base-image>
			{{ corners }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage } from '@/components/base'
defineProps({
	redCards: {
		type: [String, Number],
		default: '0'
	},
	yellowCards: {
		type: [String, Number],
		default: '0'
	},
	corners: {
		type: [String, Number],
		default: '0'
	},
	inverse: {
		type: Boolean,
		default: false
	}
})
</script>

<!-- <style lang="scss">
@use '@/styles/mixins.scss' as *;
.match-cards {
	.base-image {
		@include svg-color(var(--color-text-3));
	}
}
</style> -->
